<!-- 
  左侧菜单页面
 -->
<template>
  <el-row class="tac">
    <el-col :span="12">
      <el-menu class="el-menu-vertical-demo" background-color="#f8f9fa">
        <el-menu-item
          v-for="menu in obj.childMenu"
          :key="menu.id"
          :index="menu.id"
          @click="sendTarget(menu)"
        >
          <i class="el-icon-setting"></i>
          <template #title>
            <span style="font-size: 16px"> {{ menu.name }}</span>
          </template>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
import { reactive } from "vue";

export default {
  //下面这行注释不要删
  // eslint-disable-next-line no-unused-vars
  setup(props, { attrs, slots, emit }) {
    const obj = reactive({
      isCollapse: false,
      childMenu: [],
      targetMenu: {},
    });

    //header点击菜单 -> 通知Home -> 触发此方法
    const setLeftMenu = (childMenu) => {
      obj.childMenu = childMenu;
      sendTarget(childMenu[0]); 
    };

    //告知Home -> 通知 main 切换路径
    const sendTarget = (targetMenu) => {
      obj.targetMenu = targetMenu;
      emit("getTarget", targetMenu);
    };

    return {
      obj,
      setLeftMenu,
      sendTarget,
    };
  },
};
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  /* min-height: 600px; */
  height: 100%;
  padding-top: 40px;
}

.el-main {
  --el-main-padding: 0px !important;
}
</style>
